<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
</head>
<body>
<div id="maindiv" class="maindiv mainPadding" style="display: none;">    
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        <el-breadcrumb-item>次日邀约统计表</el-breadcrumb-item>
    </el-breadcrumb>    
    <el-row class="marginB20">
        <!-- <el-button type="primary" @click="searchYesterday">昨天</el-button>
        <el-button type="success" @click="searchWeek">近七天</el-button>
        <el-button type="warning" @click="searchMonth">本月</el-button> -->
        <shiro:hasPermission name="statistics:nextInvitation:export">
        <el-button type="danger" @click="exportRs">导出Excel报表</el-button>
        </shiro:hasPermission>
        <el-button type="primary" style="float: right;" @click="goback()">返回</el-button>    
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
           <el-form :inline="true" :model="form" class="demo-form-inline mainSearchForm" ref="form"> 
                <el-form-item label="日期:" label-width="auto">
                    <el-date-picker format="yyyy-MM-dd" v-model="form.dateTimes" type="datetime" value-format="yyyyMMdd" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="餐饮集团:">  
                    <el-select v-model="form.companyId" placeholder="全部" style="width: 100%;" clearable filterable>
                        <el-option
                            v-for="item in companyList"
                            :key="item.id"
                            :label="item.groupName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商务组:">  
                    <el-select v-model="form.busGroupId" placeholder="全部" style="width: 100%;" filterable clearable>
                        <el-option
                            v-for="item in busList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事业部:">  
                    <el-select v-model="form.deptGroupId" placeholder="全部" style="width: 100%;" filterable clearable @change="curTelGroupSale" :disabled="isDeptId">
                        <el-option
                            v-for="item in deptList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销组:">  
                    <el-select v-model="form.teleGroupId" placeholder="全部" style="width: 100%;" clearable filterable :disabled="isTeleGroupId">
                        <el-option
                            v-for="item in orgTeleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" class="searchBtn"  type="primary" @click="searchTable(1)" :disabled="loading">搜索</el-button>
                </div>  
            </el-form>
        </div>
        <el-row>
            <el-table 
                ref="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="tableData"
                v-loading="loading"
                :cell-style="centerStyle"
                :header-cell-style="centerStyle"
                :span-method="arraySpanMethod">
                <el-table-column type="index" label="序号" align="center" width="55" :index="indexFun"></el-table-column>
                <el-table-column prop="deptGroupName" label="事业部"></el-table-column>
                <el-table-column prop="teleGroupName" label="电销组"></el-table-column>
                <el-table-column prop="invitationCount" label="次日邀约数"></el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="searchTable()"></table-pagination>
        </el-row>
    </div>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<style>
    .el-table tr:nth-of-type(1) td:nth-of-type(n+1) {
        font-weight: bold;
    }
    .mainSearchFormBox form .el-form-item:first-child .el-form-item__label{
        width: 100px;
    }
</style>
<script th:inline="javascript">
    var companyList=[[${companyList}]];// 集团
    var busList=[[${busList}]];// 商务组
    var deptList=[[${deptList}]];// 事业部
    var parentParam=[[${baseQueryDto}]];
    var deptId=[[${deptId}]];//当前用户 事业部id
    var teleGroupId=[[${teleGroupId}]];//当前用户电销组id
    // var teleGroupId="915319637549027";//当前用户电销组id
    var mainDivVM = new Vue({
        el: '#maindiv',
        data: function() {
            return {
                loading:false,
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
                form: {
                    dateTimes:'',
                    companyId:'',
                    busGroupId:'',
                    deptGroupId:'',
                    teleGroupId:'',
                },
                export: {
                    dateTimes:'',
                    companyId:'',
                    busGroupId:'',
                    deptGroupId:'',
                    teleGroupId:'',
                },
                tableData: [],
                companyList:companyList,//餐饮集团
                busList:busList,//商务组
                deptList:deptList,//事业部
                orgTeleArr: '', // 电销组
                // pickerOptions0: {
                //   disabledDate(time) {
                //     return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
                //   }
                // },
                isDeptId:false,
                isTeleGroupId:false,
            }             
        },
        methods: {    
            centerStyle(){
                return "text-align:center"
            },  
            curTelSale(seleVal){ // 根据电销组选择电销顾问
                if(seleVal==null||seleVal==""){
                    return ;
                }
                param={};
                param.orgId=seleVal;
                param.roleCode="DXCYGW";
                axios.post('/statistics/appointmentVisit/getSaleList' ,param).then(function (response) {  
                    mainDivVM.busSaleArr=response.data.data;
                }).catch(function (error) {
                     mainDivVM.$message({
                        message: "电销顾问请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            searchTable(firstPage) { 
                var param = {};
                if(firstPage){
                    param.pageNum = firstPage;
                }else{
                    param.pageNum = this.pager.currentPage;
                }

                var dateTimes=this.form.dateTimes;
                if(dateTimes.length>8){
                    dateTimes=this.minuteFormat(this.form.dateTimes);
                }else{
                    dateTimes=this.form.dateTimes;
                }
                param.dateTimes = dateTimes;
                param.companyId = this.form.companyId;
                param.busGroupId = this.form.busGroupId;
                param.deptGroupId = this.form.deptGroupId;
                param.teleGroupId = this.form.teleGroupId;
                this.loading = true; 
                axios.post('/nextInvitation/queryAreaPage',param).then(function (response) {
                    console.log(response)
                    if(!response || !response.data){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        return ;
                    }
                    var resobj= response.data;
                    if(resobj.code != '0'){
                        mainDivVM.loading = false;
                        mainDivVM.$message({
                            message: resobj.msg,
                            type: 'error'
                        });
                        return ;
                    }else if(resobj.data && resobj.data.tableData){
                        var resobjData = resobj.data;    
                        var tableData = resobjData.tableData;
                        mainDivVM.tableData = tableData.data;
                        if( tableData.data.length && resobj.data.totalData ){
                            var totalData = resobjData.totalData[0];
                            mainDivVM.tableData.unshift(totalData);
                        }
                        mainDivVM.pager.currentPage = tableData.currentPage;
                        mainDivVM.pager.total = tableData.total;
                        mainDivVM.loading = false;
                        mainDivVM.export.dateTimes = dateTimes;
                        mainDivVM.export.companyId = mainDivVM.form.companyId;
                        mainDivVM.export.busGroupId = mainDivVM.form.busGroupId;
                        mainDivVM.export.deptGroupId = mainDivVM.form.deptGroupId;
                        mainDivVM.export.teleGroupId = mainDivVM.form.teleGroupId;
       
                    }else{
                        mainDivVM.loading = false;
                    }
                }).catch(function (error) {
                    mainDivVM.loading = false;
                    mainDivVM.$message({
                        message: "请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            goback () {
                window.history.go(-1);
            },
            dateFormat (row, column) { 
                var date = row[column.property];
                if (!date) {return "";}
                var d = date.toString();
                var oYear = d.slice(0,4);
                var oMonth = d.slice(4,6);
                var oDay = d.slice(6);
                return oYear+"-"+oMonth+"-"+oDay; 
            }, 
            numFormat(row, column){
                var percent = row[column.property];
                if(percent){
                    percent = Math.floor(percent * 100) / 100;
                }
                return percent;
            },
            minuteFormat (m) {
                if (!m) {return "";}
                var timeStr = new Date(m);
                var yearRes = timeStr.getFullYear()
                var monthRea = timeStr.getMonth()+1;
                monthRea = monthRea < 10 ?  "0" + monthRea : monthRea;
                var dateRes = timeStr.getDate();
                dateRes = dateRes < 10 ?  "0" + dateRes : dateRes;  
                var hoursRes = timeStr.getHours();
                hoursRes = hoursRes < 10 ?  "0" + hoursRes : hoursRes;  
                var minRes = timeStr.getMinutes();
                minRes = minRes < 10 ?  "0" + minRes : minRes;                
                // var timeRes = "" + yearRes + monthRea + dateRes + hoursRes + minRes;
                var timeRes = "" + yearRes + monthRea + dateRes;
                return timeRes;
            },
            dateTimeFormat (dt) { 
                if (!dt) {return "";}
                var d = dt.toString();
                var oYear = d.slice(0,4);
                var oMonth = d.slice(4,6);
                var oDay = d.slice(6,8);
                var oHour = d.slice(8,10);
                var oMinute = d.slice(10);
//                 return oYear+"-"+oMonth+"-"+oDay+" "+oHour+":"+oMinute;
                return oYear+"-"+oMonth+"-"+oDay;
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并第一行
                if (rowIndex === 0) {
                    if (columnIndex === 0) {
                        return [0, 0];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }else if (columnIndex === 2) {
                        return [1, 3];
                    }
                }
            },
            indexFun (index) { // 表格序号
                return index;
            },            
            exportRs(){
                var param = {};
                param.dateTimes = this.export.dateTimes;
                param.companyId = this.export.companyId;
                param.busGroupId = this.export.busGroupId;
                param.deptGroupId = this.export.deptGroupId;
                param.teleGroupId = this.export.teleGroupId;
                axios.post('/nextInvitation/areaExport',param,{responseType:'blob'})
                    .then(function (response) {
                        var data =  response.data;
                        var fileName = response.headers.filename;
                        saveAs(data,decodeURI(fileName));
                    })
                    .catch(function (error) {
                        mainDivVM.$message({
                            message: "导出失败，请稍后重试",
                            type: "error"
                        });
                    });
            },
            curTelGroupSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.form.teleGroupId = '';
                this.getTelGroupSale(seleVal);
            },
            getTelGroupSale(seleVal){
                if(!seleVal){return;}
                param={};
                param.parentId=seleVal;
                param.orgType=1;
                axios.post('/base/getGroupList',param).then(function (response) {
                    mainDivVM.orgTeleArr=response.data.data;
                }).catch(function (error) {
                        mainDivVM.$message({
                        message: "电销组请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
        },
        created(){ 
            // 接收参数
            this.form.dateTimes=this.dateTimeFormat(parentParam.dateTimes);
            this.form.companyId=parentParam.companyId;
            this.form.busGroupId=parentParam.busGroupId;
            this.form.deptGroupId=parentParam.deptGroupId;
            this.form.teleGroupId=parentParam.teleGroupId;

            this.export.dateTimes=parentParam.dateTimes;
            this.export.companyId=parentParam.companyId;
            this.export.busGroupId=parentParam.busGroupId;
            this.export.deptGroupId=parentParam.deptGroupId;
            this.export.teleGroupId=parentParam.teleGroupId;

            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            if(this.export.deptGroupId){
                this.getTelGroupSale(this.export.deptGroupId);
            }
            this.searchTable();

            // console.log(companyList)
            // console.log(busList)
            // console.log(deptList)
            // console.log(parentParam)

            if(deptId){
                this.form.deptGroupId=deptId;
                this.isDeptId=true;
                this.getTelGroupSale(deptId);
            }
            if(teleGroupId){
                this.form.teleGroupId=teleGroupId;
                this.isTeleGroupId=true;
            }
        },
        mounted(){
            document.getElementById('maindiv').style.display = 'block';
        }
    })
    
</script>
</html>